<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getScreenExaminationRoom,getScreenExaminationRoomTimesPlayerList } from '@/api/fortyThree'
import dayjs from "dayjs";
import {useRouter} from "vue-router";
import LogOut from "@/components/LogOut.vue";
const router = useRouter()
// 场地信息
const siteInfo = ref<any>({})
const _getScreenExaminationRoom = () => {
  getScreenExaminationRoom().then((res) => {
    if(res.code===200){
      siteInfo.value = res.data
      _getScreenExaminationRoomTimesPlayerList()
      setInterval(()=>{
        _getScreenExaminationRoomTimesPlayerList()
      },3000)
    }
  })
}
// 人员信息
const personList = ref<any[]>([])
const _getScreenExaminationRoomTimesPlayerList=()=>{
  getScreenExaminationRoomTimesPlayerList(siteInfo.value.id).then((res) => {
    if(res.code===200){
      personList.value=res.data.map(item=>{
        return {
          ...item,
          formatDate:dayjs(item.createDate).format('YYYY-MM-DD HH:mm:ss')
        }
      })
    }
  })
}
const goToPage = () => {
  router.push({ path: '/fortyThree/competitionInfo', query: { id: siteInfo.value?.id} });
}
onMounted(() => {
  _getScreenExaminationRoom()
})
</script>

<template>
<div class="ci-cont">
  <LogOut top="65px" right="60px" width="100px" height="100px" />
  <div class="ci-right">
    <div class="ci-tit">人员信息</div>
    <div class="ci-right_cont">
      <div class="ci-ul">
<!--        <div class="ci-li ci-head_bg">-->
<!--          学号-->
<!--        </div>-->
        <div class="ci-li ci-head_bg">
          学生姓名
        </div>
        <div class="ci-li ci-head_bg">
          照片
        </div>
        <div class="ci-li ci-head_bg">
          入场时间
        </div>
      </div>
      <div class="h-1600px of-y-auto">
        <div class="ci-ul" v-for="(item,index) in personList" :key="index">
<!--          <div class="ci-li ci-body_bg">-->
<!--            {{item.code||'-'}}-->
<!--          </div>-->
          <div class="ci-li ci-body_bg">
            {{item.name}}
          </div>
          <div class="ci-li ci-body_bg">
            <img class="ci-li_img" :src="item.image" alt="">
          </div>
          <div class="ci-li ci-body_bg">
            <span class="font-size-9">{{item.formatDate}}</span>
          </div>
        </div>
      </div>

    </div>
  </div>
  <div class="ci-left">
    <div class="ci-tit">场地名称</div>
    <div class="ci-left_cont">
        <img :src="siteInfo.image" alt="" />
    </div>
  </div>
</div>
</template>

<style scoped lang="less">
.ci-cont{
  padding: 105px 81px 70px 98px;
  //padding: 105px 0 70px;
  display: flex;
  width: 3840px;
  height: 2160px;
}

.ci-tit{
  font-family: AlimamaShuHeiTi;
  font-size: 60px;
  color: #fff;
  margin-bottom: 85px;
}
.ci-left{
  .ci-left_cont{
    background: url("@/assets/fortyThree/ci-bg.png") no-repeat;
    width: 1640px;
    height: 1828px;
    padding: 80px 112px 56px 113px;
  }
    img{
      width: 100%;
      height: 100%;
      object-fit: fill;
    }
}

.ci-right{
  margin-right: 68px;
}

.ci-right_cont{
  width: 1951px;
  height: 1834px;
  background: rgba(11, 57, 133, 0.56);
  border-radius: 25px;
  border: 2px solid rgba(255,255,255,0.2);
  padding: 53px 37px 46px 61px;
}
.ci-ul{
  display: flex;
  align-items: center;
  .ci-li{
    width: 33%;
    height: 124px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 18px;
    margin-bottom: 20px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 48px;
    color: #fff;
    font-style: normal;
    &.ci-li:last-child{
      margin-right: 0;
    }
  }
  .ci-head_bg{
    background: rgba(51,179,255,0.18);
    border: 2px solid #319BE7;
  }
  .ci-body_bg{
    background: rgba(255,255,255,0.18);
    border: 2px solid rgba(255,255,255,0.18);
  }
}
.ci-li_img{
  width: 108px;
  height: 98px;
}
</style>
